<template>
    <div class="page-container">
        <a-tabs efault-active-key="water" @change="onTabClick">
            <a-tab-pane tab="包装饮用水" key="water"> </a-tab-pane>
            <a-tab-pane tab="日用百货" key="daily"> </a-tab-pane>
            <div slot="tabBarExtraContent">
                <a-select v-model="params.goodsTypeId" allowClear placeholder="商品分类" style="width:160px;" v-if="params.type === 'daily'">
                    <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
                <a-select v-model="params.goodsTypeId" allowClear placeholder="商品分类" style="width:160px;" v-else>
                    <a-select-option v-for="item in waterTypeList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
                <a-input-search placeholder="商品名称/编码" v-model="params.name" @search="onSearch" style="width:300px;margin-left:5px">
                    <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                </a-input-search>
            </div>
        </a-tabs>
        <div class="grid-container">
            <a-table bordered :columns="columns" :dataSource="dataList" :rowSelection="{selectedRowKeys: selection, onChange: onChange,type:'radio'}"  :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle" style="border-left: 1px solid #e8e8e8">
                <template slot="name" slot-scope="text,record,index">
                    <div class="goods clearfix">
                        <div>
                            <img v-if="record.mainImage && record.mainImage!='' " :src="record.mainImage" />
                            <img v-else src="../../../assets/images/nogoods.png" />
                        </div>
                        <div class="info">
                            <p>{{record.name}}</p>
                        </div>
                    </div>
                </template>
                <template slot="price" slot-scope="price">
                    {{fmMoney(price,2,false)}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a-button type="default" @click="onSelect(record)">选择</a-button>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action">
                </a-col>
                <a-col :span="12" :order="2" class="tool-pagination">
                    <a-pagination v-if="total>params.pageSize" :total="total"  @change="onPageChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
    import {findWaterList as findWaterGoodsList,findList as findGoodsList} from "../../../api/goods";
    import {findWaterList as findWaterTypeList,findList as findTypeList} from "../../../api/goodsType";
    import {fmMoney} from "../../../utils";

    const columns=[
        {title:'商品名称',dataIndex:'name',align:'left',scopedSlots: { customRender: 'name' }},
        {title:'分类',dataIndex:'typeName',align:'center'},
        {title:'单价',dataIndex:'price',align:'right',scopedSlots: { customRender: 'price' }},
        {title: '选择',dataIndex: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}
    ]
    export default {
        props:{
            selectedKey:{
                type:Number,
                default: 0
            }
        },
        data(){
            return{
                columns,
                params:{
                    type: 'water',
                    goodsTypeId:undefined,
                    pageSize:10,
                    current:1,
                },
                total:0,
                dataList:[],
                selection:[],
                loading:false,
                typeList:[],  //商品分类列表
                waterTypeList:[],  //商品分类列表
            }
        },
        methods:{
            fmMoney,
            onTabClick(key){
                this.params.type = key;
            },
            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            onPageChange(current){
                this.params.current = current;
                this.onLoad();
            },
            onChange(selectedRowKeys, selectedRows){
                this.$emit('result',selectedRows[0])
            },
            async onSelect(record){
                this.$emit('result',record)
            },
            //得到分类
            async onLoadTypeList(){
                let waterResp = await findWaterTypeList();
                if(this.qUtil.validResp(waterResp)){
                    this.waterTypeList = waterResp.data.dataList;
                }
                let resp = await findTypeList();
                if(this.qUtil.validResp(resp)){
                    this.typeList = resp.data.dataList;
                }
            },
            async onLoad(){
                this.loading = true;
                let params = {...this.params}
                let dataList = [],total = 0
                if(params.type === 'daily'){
                    let resp = await findGoodsList(params);
                    if(this.qUtil.validResp(resp)){
                       dataList = resp.data.dataList || []
                        total = resp.data.total || 0
                    }
                }else{
                    let resp = await findWaterGoodsList(params);
                    if(this.qUtil.validResp(resp)){
                        dataList = resp.data.dataList || []
                        total = resp.data.total || 0
                    }
                }
                this.loading = false;
                this.dataList = dataList;
                this.total = total;
            },
        },
        async mounted(){
            await this.onLoadTypeList();
            this.onLoad();
            if(this.selectedKey != null && this.selectedKey > 0){
                this.selection = [this.selectedKey]
            }
        }
    }
</script>

<style scoped>
    .goods{
        text-align: left;
    }
    .goods div{
        float:left;
    }
    .goods img{
        width:50px;
        height:50px;
    }
    .goods .info{
        margin-left:10px;
        text-align: left;
        line-height: 1.8;
    }
</style>